<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
</head>

<body>
	<img src="" alt="" id="img1" />
	<img src="" alt="" id="img2" />
	<img src="" alt="" id="img3" />
	<script>
		var path = 'https://static-zh.wxb.com.cn/customer/form/2020/11/1758696796d.jpg';
		// <!-- 这个例子是缩放 -->
		document.getElementById('img1').src = path;
		function scaleImage(path) {
			const canvas = document.createElement('canvas');
			canvas.width = 200;
			canvas.height = 100;
			const ctx = canvas.getContext('2d');
			const img = document.createElement('img');
			img.src = path;
			img.setAttribute('crossOrigin', 'Anonymous');
			img.onload = function () {
				ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
				document.getElementById('img2').src = canvas.toDataURL();
			};
		}
		scaleImage(path);
	</script>
	<script>
		// <!-- 这个例子是裁剪 -->
		var path = 'https://static-zh.wxb.com.cn/customer/form/2020/11/1758696796d.jpg';
		function clipImage(path) {
			const canvas = document.createElement('canvas');
			canvas.width = 200;
			canvas.height = 100;
			const ctx = canvas.getContext('2d');
			ctx.arc(
				canvas.width / 2, canvas.height / 2,
				canvas.height / 2, 0, 2 * Math.PI,
			)
			ctx.fill()
			ctx.clip()
			const img = document.createElement('img');
			img.setAttribute('crossOrigin', 'Anonymous');
			img.src = path;
			img.onload = function () {
				ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
				document.getElementById('img3').src = canvas.toDataURL();
			};
		}
		clipImage(path);
	</script>
</body>

</html>